/* General Settings */
*{ margin: 0; padding: 0; }
img { border: 0; }

html, body { height: 100%; }
body{
font-family: "Open Sans", sans-serif;
font-size: 17px;
color: #eee4d0;
background: #192e57;
overflow-x: hidden;
}

p { margin-bottom: 20px; line-height: 27px; }

a{ color: #eee4d0; text-decoration: none; outline: none; }
a:hover{ text-decoration: none; }

/* Web Font */
.wf{ font-family: "Encode Sans Condensed", sans-serif; }

/* HTML5 Elements */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main, section figure, article figure { display: block; padding: 0; margin: 0; }

/* Loader */
.loader{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; background: transparent; text-indent: -9000px; z-index: 9; }
#loader{ position: fixed; z-index: 9999999; }
.loader:before {
content: '';
height: 20px;
width: 20px;
position: absolute;
left:50%; 
top:50%; 
margin-top: -10px;
margin-left: -10px;
-webkit-animation: rotation .6s infinite linear;
-moz-animation: rotation .6s infinite linear;
-o-animation: rotation .6s infinite linear;
animation: rotation .6s infinite linear;
border-left: 6px solid rgba(255, 255, 255, .5);
border-right: 6px solid rgba(255, 255, 255, .5);
border-bottom: 6px solid rgba(255, 255, 255, .5);
border-top: 6px solid rgba(255, 255, 255, 1);
border-radius: 100%;
text-indent: -9000px;
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box;
}
.loader.big:before { height: 40px; width: 40px; margin-top: -20px; margin-left: -20px; }
@-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); } }
@-moz-keyframes rotation { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(359deg); } }
@-o-keyframes rotation { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(359deg); } }
@keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } }

/* Box Method */
.box{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/* Center */
.center{ text-align: center; }

/* Padding */
.pad_xbig{ padding: 120px; }
.grid.pad_xbig{ padding: 120px 105px; }
.pad_big{ padding: 80px; }
.pad_med{ padding: 60px; }
.pad_small{ padding: 40px; }
.pad_xsmall{ padding: 30px; }
.pad_xxsmall{ padding: 20px; }
.pad_std{ padding: 10px; }
.pad_top{ padding-top: 40px; }
.pad_top_med{ padding-top: 60px; }
.pad_btm_med{ padding-bottom: 60px; }
.pad_top_big{ padding-top: 80px !important; }
.pad_top_xbig{ padding-top: 120px !important; }
.pad_btm_big{ padding-bottom: 80px !important; }
.pad_notop{ padding-top: 0 !important; }
.pad_nobtm{ padding-bottom: 0 !important; }

/* Margin */
.marg5{ margin: 0 0 5px; }
.marg10{ margin: 0 0 10px; }
.marg15{ margin: 0 0 15px; }
.marg20{ margin: 0 0 20px; }
.marg30{ margin: 0 0 30px; }
.marg40{ margin: 0 0 40px; }
.marg50{ margin: 0 0 50px; }
.marg60{ margin: 0 0 60px; }
.marg80{ margin: 0 0 80px; }

/* Round */
.round{ border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
.round_big{ border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; }

/* Shadow */
.shadow{
-webkit-box-shadow: 0px 0px 20px 0 rgba(0,0,0,0.1);
-moz-box-shadow: 0px 0px 20px 0 rgba(0,0,0,0.1);
box-shadow: 0px 0px 20px 0 rgba(0,0,0,0.1);
}

/* Button */
.btn{
width: auto;
height: 50px;
float: left;
font-size: 15px;
font-weight: 700;
line-height: 46px;
color: #eee4d0 !important;
text-align: center;
text-decoration: none;
text-transform: uppercase;
padding: 0 30px;
margin: 0;
border: 2px solid #eee4d0;
background-color: transparent;
border-radius: 25px; 
-moz-border-radius: 25px; 
-webkit-border-radius: 25px;
vertical-align: top;
}
.btn.big{
height: 60px;
font-size: 18px;
line-height: 56px;
padding: 0 46px;
border-radius: 30px; 
-moz-border-radius: 30px; 
-webkit-border-radius: 30px;
}
.btn:hover{ color: #192e57 !important; background-color: #eee4d0; text-decoration: none !important; }

.btn.reverse{ color: #192e57 !important; background-color: #eee4d0; }
.btn.reverse:hover{ color: #eee4d0 !important; background-color: transparent; }

/* With Background Image */
.with_bg{
background-color: #000;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;
}
.with_bg.pos_top{ background-position: top; }
.with_bg.pos_btm{ background-position: bottom; }
.with_bg.with_overlay::before{
content: '';
display: block; 
width: 100%; 
height: 100%; 
position: absolute;
top: 0;
left: 0;
background: #000; 
-webkit-opacity: 0.3;
-moz-opacity: 0.3;
opacity: 0.3;
z-index: 1;
}

/* Image Resizing */
.img img{ display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; position: relative; }
.img a{ display: block; }

/* Container */
#container{ width: 100%; height: 100%; float: left; display: block; padding: 0 0 0 560px; margin: 0 auto; position: relative; }

/* Header */
#header{ width: 560px; height: 100%; background: #192e57; position: fixed; top: 0; left: 0; bottom: 0; z-index: 9999; }
#header .wrapper{
width: 100%;
display: block;
color: #eee4d0;
text-align: center;
position:absolute;
top: 50%; 
left: 50%; 
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%); 
transform: translate(-50%,-50%);
z-index: 9;
}

#header #logo{ width: 168px; height: 100px; display: block; margin: 0 auto 12px; text-indent: -9000px; }
#header #logo a{ display: block; width: 168px; height: 100px; background: url(images/logo.svg) no-repeat center; }

#header h2{ font-size: 30px; font-weight: 200; line-height: 34px; }
#header h3{ font-size: 18px; font-weight: normal; font-style: italic; line-height: 25px; margin: 0 0 8px; }

#header a.whatsapp{ 
width: 100%; 
float: left; 
color: #192e57 !important; 
text-align: center; 
background-color: #eee4d0; 
padding: 0 35px;
margin-top: 25px; 
position:relative;
}
#header a.whatsapp:hover{ color: #eee4d0 !important; background-color: transparent; }

.signup{ width: 100%; float: left; margin-top: 15px; position: relative; }
.signup #form_signup{ width: 100%; float: left; }
.signup .field{ display: block; padding-right: 155px; }
.signup #email_signup{width: 100%;height: 64px; display: block; font-family: "Encode Sans Condensed", sans-serif; color: #eee4d0; font-size: 18px; font-weight: 200; text-transform: uppercase; padding: 0;padding-left: 35px;background: none;border: 2px solid #eee4d0;border-right: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-appearance: none;border-radius: 32px 0 0 32px;-moz-border-radius: 32px 0 0 32px;-webkit-border-radius: 32px 0 0 32px;outline: none;position: relative;z-index: 10;}
.signup .field input::-webkit-input-placeholder{ color: #eee4d0; }
.signup .field input:-moz-placeholder{ color: #eee4d0; }
.signup .field input::-moz-placeholder{ color: #eee4d0; }
.signup .field input:-ms-input-placeholder{ color: #eee4d0; }
.signup #submit_signup { 
width: 155px; 
height: 64px;
display: block; 
float: right;
font-family: "Encode Sans Condensed", sans-serif;
font-size: 18px;
font-weight: 700 !important;
color: #eee4d0; 
text-transform: uppercase; 
padding: 0;
margin: -64px 0 0 0; 
border: 2px solid #eee4d0;
border-left: 0;
background-color: transparent;
position: relative; 
cursor: pointer;
outline: none;
-webkit-appearance: none;
border-radius: 0 32px 32px 0; 
-moz-border-radius: 0 32px 32px 0; 
-webkit-border-radius: 0 32px 32px 0;	
z-index: 9; 
}

/* Main */
#main{ width: 100%; float: left; position: relative; }

/* Section */
.section{ width: 100%; float: left; position: relative; }
.section.hgt100{ height: calc(100vh); }
.section.centered{ text-align: center; }
.section .wrapper{ width: 100%; display: block; clear: both; margin: 0 auto; position: relative; overflow: hidden; }
.section .wrapper.short{ max-width: 680px; float: left; }

.section .main{ width: 100%; float: left; position: relative; }
.section .header{ width: 100%; float: left; position: relative; }
.section .header h2{ font-size: 48px; font-weight: 200; line-height: 54px; }
.section .header h3{ font-size: 32px; font-weight: 200; line-height: 38px; }
.section .content{ width: 100%; float: left; position: relative; }
.section .footer{ width: 100%; float: left; padding-top: 15px; position: relative; }

/* Hero */
.section.hero.slideshow::before {
content: '';
width: 300px;
display: block;
color: #fff;
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: linear-gradient(to right, rgba(25,46,87,1) 0%, rgba(25,46,87,0.9) 20%, rgba(25,46,87,0.6) 40%, rgba(25,46,87,0.3) 60%, rgba(25,46,87,0) 100%);
z-index: 99;
}
.section.hero.slideshow .swiper-wrapper{ overflow: hidden; }
.section.hero.slideshow .swiper-wrapper .slide{ text-indent: -9000px; }

/* Intro */
.section.intro .images{ width: 100%; float: right; }
.section.intro .image1{ width: 60%; height: 350px; float: right; position: relative; z-index: 9; }
.section.intro .image1 img{ display: none; }
.section.intro .image2{ width: 60%; height: 350px; float: left; margin-top: -175px; position: relative; }
.section.intro .image2 img{ display: none; }

.section.intro .btn{ margin-right: 20px; margin-bottom: 20px; }

ul.social{ width: auto; float: left; list-style: none; }
ul.social li{ width: 50px; height: 50px; float: left; margin-right: 10px; text-indent: -9000px; }
ul.social li a{ 
width: 50px; 
height: 50px; 
display: block; 
border: 2px solid #eee4d0;
background-position: center; 
background-repeat: no-repeat; 
border-radius: 50%; 
-moz-border-radius: 50%; 
-webkit-border-radius: 50%; 
-webkit-background-size: 34px; 
-moz-background-size: 34px; 
-o-background-size: 34px; 
background-size: 34px;
position: relative; 
overflow: hidden; 
}
ul.social li.facebook a{ background-image: url(images/facebook.svg); }
ul.social li.facebook a:hover{ background-image: url(images/facebook_hover.svg); }
ul.social li.instagram a{ background-image: url(images/instagram.svg); }
ul.social li.instagram a:hover{ background-image: url(images/instagram_hover.svg); }
ul.social li.tiktok a{ background-image: url(images/tiktok.svg); }
ul.social li.tiktok a:hover{ background-image: url(images/tiktok_hover.svg); }
ul.social li a:hover{ border: 2px solid #eee4d0; background-color: #eee4d0; }

/* Contact */
.section.contact .main{ width: 40%; }
.section.contact .main ul{ width: 100%; float: left; list-style: none; }
.section.contact .main ul li{ display: block; font-size: 17px; line-height: 25px; }
.section.contact .main ul li.address span{ display: block; }
.section.contact .main ul li.address{ margin: 0 0 8px; }
.section.contact .main ul li.phone{ font-weight: 700; }

.section.contact .map{ width: 60%; height: 350px; float: right; }
.section.contact .map iframe{ width: 100%; max-width: 100%; height: 100%; }

/* Footer */
#footer{ width: 100%; float: left; position: relative; }

#footer .meta{ width: auto; float: right; display: table; }
#footer .meta .logo_bdhg{ width: auto; float: left; display: block; text-indent: -9000px; }
#footer .meta .logo_bdhg a{ display: block; width: 80px; height: 80px; background: url(images/logo_bdhg.svg) no-repeat center; }
#footer .meta .wrap{ display: table-cell; vertical-align: middle; font-size: 11px; line-height: 16px; text-align: right; padding-right: 20px; }
#footer .meta span{ display: block; }
#footer .meta a:hover{ text-decoration: underline; }


@media only screen and (max-width: 1680px){
.section.intro .image1{ height: 300px; }
.section.intro .image2{ height: 300px; margin-top: -150px; }

.section.contact .main{ width: 50%; }
.section.contact .map{ width: 50%; }
}

@media only screen and (max-width: 1480px){
.pad_xbig{ padding: 100px; }
.pad_big{ padding: 60px; }
.pad_med{ padding: 40px; }
.pad_small{ padding: 30px; }
.pad_xsmall{ padding: 30px; }
.pad_xxsmall{ padding: 20px; }
.grid .wrapper.pad_big{ padding: 40px; }
.grid .wrapper.pad_med{ padding: 20px; }

#container{ padding: 0 0 0 460px; }

#header{ width: 460px; }
}

@media only screen and (max-width: 1280px){
.pad_xbig{ padding: 60px; }
.pad_big{ padding: 40px; }

.section.intro .image1{ height: 240px; }
.section.intro .image2{ height: 240px; margin-top: -120px; }

.section.contact .main{ width: 100%; }
.section.contact .map{ width: 100%; height: 300px; }
}

@media only screen and (max-width: 1180px){
.pad_xbig{ padding: 80px; }
.pad_big{ padding: 60px; }

#container{ padding: 0; }

#header{ position: absolute; }

.section.hero.slideshow{ padding-left: 460px; }
.section.hero.slideshow::before { left: 460px; }

.section.intro .image1{ height: 350px; }
.section.intro .image2{ height: 350px; margin-top: -175px; }

.section.contact .map{ width: 100%; height: 350px; }
}

@media only screen and (max-width: 980px){
#header{ width: 100%; height: auto; position: relative; top: inherit; left: inherit; bottom: inherit; }
#header .wrapper{
width: 100%;
max-width: 460px;
margin: 0 auto;
position: relative;
top: inherit; 
left: inherit; 
-webkit-transform: none;
-ms-transform: none; 
transform: none;
overflow: hidden;
}

.section.hero.slideshow{ padding-left: 0; }
.section.hero.slideshow::before {
content: '';
width: 100%;
height: 300px;
display: block;
color: #fff;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: inherit;
background: linear-gradient(to bottom, rgba(25,46,87,1) 0%, rgba(25,46,87,0.9) 20%, rgba(25,46,87,0.6) 40%, rgba(25,46,87,0.3) 60%, rgba(25,46,87,0) 100%);
z-index: 99;
}
.section.hero.slideshow::after {
content: '';
width: 100%;
height: 300px;
display: block;
color: #fff;
position: absolute;
left: 0;
top: inherit;
right: 0;
bottom: 0;
background: linear-gradient(to top, rgba(25,46,87,1) 0%, rgba(25,46,87,0.9) 20%, rgba(25,46,87,0.6) 40%, rgba(25,46,87,0.3) 60%, rgba(25,46,87,0) 100%);
z-index: 99;
}

.section.intro .image1{ height: 300px; }
.section.intro .image2{ height: 300px; margin-top: -150px; }

.section.contact .map{ width: 100%; height: 300px; }
}

@media only screen and (max-width: 880px){
.pad_xbig{ padding: 60px; }
.pad_big{ padding: 40px; }
.pad_med{ padding: 30px; }

#header{ padding-top: 20px; }

.section.intro .image1{ height: 240px; }
.section.intro .image2{ height: 240px; margin-top: -120px; }

.section.contact .main{ width: 100%; }
.section.contact .map{ width: 100%; height: 300px; }
}

@media only screen and (max-width: 680px){
.section .main{ padding-left: 0 !important; padding-right: 0!important; }

.section.intro .image1{ width: 100%; height: 300px; }
.section.intro .image2{ display: none; }
}

@media only screen and (max-width: 580px){
.section.hgt100{ height: calc(100vh - 150px); }

.section.intro .image1{ width: 100%; height: 250px; }

.section.contact .map{ width: 100%; height: 250px; }
}

@media only screen and (max-width: 480px){
.pad_xbig{ padding: 40px; }
.pad_big{ padding: 30px 25px; }
.pad_med{ padding: 25px; }

.btn.big{ font-size: 16px; }

#header{ padding: 25px 20px 0; }

#header #logo{ width: 144px; height: 86px; }
#header #logo a{ width: 144px; height: 86px; }

.signup .field{ display: block; padding-right: 135px; }
.signup #email_signup{ font-size: 15px; }
.signup #submit_signup { width: 135px; font-size: 16px; }

.section.hgt100{ height: calc(100vh - 350px); }

.section .header h2{ font-size: 40px; line-height: 46px; }

.section.hero.slideshow::before, .section.hero.slideshow::after { height: 200px; }

.section.intro .image1{ width: 100%; height: 200px; }

.section.contact .map{ width: 100%; height: 200px; }
}
